/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* model */
import { SettingGPTRobotModelModules } from "@gpt/model";
/* vue */
import { defineComponent, PropType } from "vue";
/* types */
import { SettingGPTRobotLogCountItem, SettingGPTRobotModuleType } from "@gpt/types";
/* util */
import moment from "moment";
import echarts from 'packages/Echarts';
import { timeFormatTemp } from "@src/util/lang";
import { debounce } from "lodash";

enum SettingGPTHomeLogChartEventEnum {
  Input = 'input',
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTHomeLogChart,
  props: {
    value: {
      type: Array as PropType<SettingGPTRobotLogCountItem[]>,
      default: () => []
    }
  },
  setup(props, { emit }) {
    
  },
  data() {
    return {
      modules: SettingGPTRobotModelModules,
      chart: null as any
    }
  },
  computed: {
    moduleList(): SettingGPTRobotModuleType[] {
      return this.modules
    },
    countMap() {
      const map = new Map()
      this.value.forEach((item) => {
        map.set(item.date, item.count)
      })
      return map
    }
  },
  watch: {
    value() {
      this.initChat()
    }
  },
  mounted() {
    this.initChat()
    this.addResizeListener()
  },
  beforeUnmount() {
    this.removeResizeListener()
  },
  methods: {
    addResizeListener() {
      window.addEventListener('resize', this.resize)
      window.addEventListener('visibilitychange', this.resize)
    },
    removeResizeListener() {
      window.removeEventListener('resize', this.resize)
      window.removeEventListener('visibilitychange', this.resize)
    },
    rerender() {
      this.initChat()
    },
    resize: debounce(function() {
      console.log('resize')
      // @ts-ignore
      this.rerender()
    }, 500),
    /** 
     * 获取今天到上个月今天的所有日期
    */
    getDaysInLastMonth() {
      // 获取上个月的今天
      const lastMonth = moment().subtract(1, 'months')
      // 获取今天
      const now = moment()
      // 获取上个月的今天到今天的所有日期列表
      const days = now.diff(lastMonth, 'days')
      // 日期列表
      const daysList = []
      const format = timeFormatTemp.date
      // 从上个月的今天开始，获取所有日期
      for (let i = 0; i < days; i++) {
        daysList.push(lastMonth.add(1, 'days').format(format))
      }
      
      return daysList
    },
    initChat() {
      // X 轴数据
      const xData = this.getDaysInLastMonth()
      // Y 轴数据
      const seriesData = xData.map((item) => {
        return this.countMap.get(item) || 0
      })
      // 图表配置
      const options = {
        tooltip: {
          show: true,
          formatter: '{b}: {c} 次'
        },
        color: '#165DFF',
        grid: {
          top: '25px',
          left: '25px',
          right: '25px',
          bottom: '25px'
        },     
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'line'
          }
        ]
      };
      
      const chart = echarts.init(this.$refs.Chart as HTMLDivElement)
      chart.clear()
      chart.resize()
      chart.setOption(options);
    },
    onInputHandler(value: string) {
      this.$emit(SettingGPTHomeLogChartEventEnum.Input, value)
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTHomeLogChart}>
        <div ref="Chart" class={`${ComponentNameEnum.SettingGPTHomeLogChart}-main`}>
        </div>
      </div>
    )
  }
});